@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .hasPermission {
      color: #67C23A;
    }
    .noPermission {
      color: #909399;
    }
  </style>
}

<div style="height: 10px"></div>

<el-form ref="form" :model="form" size="small" status-icon label-width="110px">
  <el-form-item label="角色名称" prop="roleName" :rules="[{ required: true, message: '请输入角色名称' }]">
    <el-input v-model="form.roleName" :disabled="roleId > 0"></el-input>
    <small class="tips">唯一标识此角色的字符串</small>
  </el-form-item>
  <el-form-item label="备注">
    <el-input v-model="form.description"></el-input>
  </el-form-item>
  <el-form-item label="系统权限设置">
    <el-checkbox :indeterminate="isSystemIndeterminate" v-model="systemCheckAll" style="margin-left: 10px;" v-on:change="handleSystemCheckAllChange">全选</el-checkbox>
    <div></div>
    <el-checkbox-group v-model="form.checkedPermissions" v-on:change="handleCheckedPermissionsChange">
      <el-checkbox v-for="permission in allPermissions" :label="permission" :key="permission">{{getPermissionText(permission)}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="站点权限设置">
    <el-alert
      :closable="false"
      title="点击进入站点权限设置界面，绿色代表有权限，灰色代表无权限，设置站点权限后需再次点击保存"
      type="warning">
    </el-alert>

    <div style="height:10px"></div>

    <el-row :gutter="20">
      <el-col :span="8" v-for="site in sites" style="margin-bottom: 20px;">
        <el-card :class="getSitePermission(site.id) ? 'hasPermission' : 'noPermission'">
          <div slot="header" class="clearfix">
            <span >{{site.siteName}}</span>
            <el-button style="float: right; font-size: 14px;" type="text" v-on:click="btnPermissionClick(site)">权限设置</el-button>
          </div>
          <div>
            文件夹：{{site.siteDir}}
          </div>
          <div>
            内容表：{{site.tableName}}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-form-item>
</el-form>

<el-divider></el-divider>
<div style="height: 10px"></div>

<el-row>
  <el-col :span="24" align="center">
    <el-button type="primary" v-on:click="btnSubmitClick" size="small">保 存</el-button>
    <el-button size="small" v-on:click="btnCancelClick">关 闭</el-button>
  </el-col>
</el-row>

@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/administratorsRoleAdd.js" type="text/javascript"></script> }